<template>
  <div>
    <header class='home-menu pure-menu pure-menu-horizontal'>
      <a href="#/" class="pure-menu-heading pure-menu-link">HOME</a>
    </header>
    <div class='query-links'>
      <h1>全國城市情況</h1>
      <a class='link' href="http://report.amap.com/index.do" target="_blank">中國主要城市擁堵排名</a>
      <a class='link' href="http://www.tianqi.com/air/?o=desc" target="_blank">全國重點城市空氣質量指數排行榜</a>
    </div>
  </div>
</template>

<style src='./styles.scss' lang='scss'></style>

<style lang='scss' scoped>
h1 {
  margin: 0 10px;
  padding: 0.4em 0;
}
@media screen and (min-width: 1200px) {
  .query-links {
    text-align: start;
    width: 80%;
    background: #f5f5f5;
  }
}
.query-links {
  padding: 20px 0;
  margin: 0 auto;
  min-width: 320px;
}

a.link {
  background: #fff;
  display: inline-block;
  margin: 10px;
  padding: 1em;
  height: 4em;
  line-height: 4em;
  box-shadow: 2px 2px 4px 1px #999;
  text-decoration: none;
  transition: all 0.6s;
}
a.link:hover {
  box-shadow: 2px 2px 6px 1px #666;
}
</style>
